<%-- 
    Author : Jakub Senko
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>EIS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="PB138 Project">
    <meta name="author" content="EIS Team">

    <link href="<%=application.getContextPath()%>/public/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }

      .row {
        margin-bottom:25px;
      }
    </style>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
  </head>

  <body>

  <%@include file="../toolbar.jsp" %>

    <div class="container">

    <ul id="myTab" class="nav nav-pills">
      <li class="active"><a href="#show" data-toggle="tab">Display all</a></li>
      <li><a href="#insert" data-toggle="tab">Insert artwork</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">

      <div class="tab-pane fade in active" id="show">

          <%--c:out value="${artwork.id}"/--%>
          <c:forEach items="${artworks}" var="artwork">
              
              
          
        <div class="row">
          <div class="span3">
            <%--img src="<%=application.getContextPath()%>/public/img/260x180.gif" /--%>
          </div>
          <div class="span6">
            <h3>${artwork.name}</h3>
            
            <p><br>${artwork.description}</p>
            <p><b>Author:</b> ${artwork.author}<br><br></p>
            <a class="btn btn-primary" target="_blank" href="<%=application.getContextPath()%>/view?id=${artwork.id}">View</a>
            <a class="btn btn-danger" href="<%=application.getContextPath()%>/delete?id=${artwork.id}">Remove</a>
            <a class="btn btn-success" href="<%=application.getContextPath()%>/qr?id=${artwork.id}">QR Code</a>
          </div>
        </div>

        <hr>

  </c:forEach>

      </div>

      <div class="tab-pane fade" id="insert">

        <h3 class="well">Insert new artwork</h3><br>
         
        <!--form method="post" class="form-horizontal"-->

          <div class="row">
            <div class="span6">

              <form enctype="multipart/form-data" action="<%=application.getContextPath()%>/insert" method="post">

              <fieldset>
                <div class="control-group">
                  <label for="name" class="control-label">Name of the artwork</label>
                  <div class="controls">
                  <input class="span3" id="name" name="name" type="text"/>
                  </div>
                </div>

                <div class="control-group">
                  <label for="author" class="control-label">Author information</label>
                  <div class="controls">
                  <input class="span3" id="author" name="author" type="text"/>
                  </div>
                </div>

                <div class="control-group">
                  <label for="note" class="control-label">Description</label>
                  <div class="controls">
                  <textarea class="input-xlarge" id="note" name="description" rows="4"></textarea>
                  </div>
                </div>



                <div class="form-actions">
                  <button type="submit" class="btn btn-primary">Insert</button>
                </div>
                
              </fieldset>
              
            </form>
            </div>
          </div>
      </div>

    </div> <!-- end of my tabbed content -->
      
      <hr>

      <footer>
        <p>&copy; EIS 2012</p>
      </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <script src="<%=application.getContextPath()%>/public/js/bootstrap-tab.js"></script>

    </div> <!-- /container -->
  </body>
</html>

